<template>
  <el-card shadow="hover" class="mt-10">
    <el-form
      label-width="100px"
      ref="skuFormRef"
      :model="skuFormData"
      :rules="skuFormRules"
    >
      <el-form-item label="SPU名称">
        {{ spuStore.spuItem.spuName }}
      </el-form-item>
      <el-form-item label="SKU名称" prop="skuName">
        <el-input placeholder="SKU名称" v-model="skuFormData.skuName" />
      </el-form-item>
      <el-form-item label="价格(元)" prop="price">
        <el-input-number
          :min="0"
          controls-position="right"
          class="sku-inp-number"
          v-model="skuFormData.price"
        />
      </el-form-item>
      <el-form-item label="重量(千克)" prop="weight">
        <el-input-number
          :min="0"
          controls-position="right"
          class="sku-inp-number"
          v-model="skuFormData.weight"
        />
      </el-form-item>
      <el-form-item label="规格描述" prop="skuDesc">
        <el-input
          placeholder="规格描述"
          type="textarea"
          :rows="4"
          v-model="skuFormData.skuDesc"
        />
      </el-form-item>
      <el-form-item label="平台属性" prop="skuAttrValueList">
        <el-row class="attr-row">
          <el-col
            :xs="24"
            :md="12"
            :lg="8"
            :xl="6"
            v-for="(attr, index) in attrList"
            :key="attr.id"
          >
            <div class="attr-wrap">
              <div class="attr-name">{{ attr.attrName }}</div>
              <el-select v-model="skuFormData.skuAttrValueList[index]">
                <el-option
                  v-for="attrValue in attr.attrValueList"
                  :key="attrValue.id"
                  :label="attrValue.valueName"
                  :value="`${attr.id}:${attr.attrName}:${attrValue.id}:${attrValue.valueName}`"
                />
              </el-select>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="销售属性" prop="skuSaleAttrValueList">
        <el-row class="attr-row">
          <el-col
            :xs="24"
            :md="12"
            :lg="8"
            :xl="6"
            v-for="(saleAttr, index) in spuSaleAttrList"
            :key="saleAttr.id"
          >
            <div class="attr-wrap">
              <div class="attr-name">{{ saleAttr.saleAttrName }}</div>
              <el-select v-model="skuFormData.skuSaleAttrValueList[index]">
                <el-option
                  v-for="saleAttrValue in saleAttr.spuSaleAttrValueList"
                  :key="saleAttrValue.id"
                  :label="saleAttrValue.saleAttrValueName"
                  :value="`${saleAttr.id}:${saleAttr.saleAttrName}:${saleAttrValue.id}:${saleAttrValue.saleAttrValueName}`"
                />
              </el-select>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="图片列表" prop="skuImageList">
        <el-table
          :data="spuImageList"
          border
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column label="图片">
            <template v-slot="{ row }">
              <el-image :src="row.imgUrl" class="sku-img" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-tag type="success" v-if="row.isDefault === '1'">默认</el-tag>
              <el-button
                type="primary"
                size="small"
                v-else
                @click="setSkuDefaultImg(row)"
              >
                设置默认图片
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addSku">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "AddSku",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import type {
  AllSpuImageItem,
  AllSpuSaleAttrList,
} from "@/api/product/model/spuModel";
import { getSpuImageListApi, getSpuSaleAttrListApi } from "@/api/product/spu";
import { addSkuApi } from "@/api/product/sku";
import { getAttrListApi } from "@/api/product/attr";
import { useSpuStore } from "@/stores/spu";
import { useCategoryStore } from "@/stores/category";
import type { AttrList } from "@/api/product/model/attrModel";
import type {
  SkuImageList,
  SkuImageItem,
  SkuItem,
} from "@/api/product/model/skuModel";
import { ElMessage } from "element-plus";

/*************请求平台属性、销售属性、图片列表数据展示 *****************/
const spuImageList = ref<AllSpuImageItem[]>([]);
const spuSaleAttrList = ref<AllSpuSaleAttrList>([]);
const attrList = ref<AttrList>([]);

const spuStore = useSpuStore();
const categoryStore = useCategoryStore();

onMounted(async () => {
  const id = spuStore.spuItem.id as number;
  spuImageList.value = (await getSpuImageListApi(id)) as AllSpuImageItem[];
});
onMounted(async () => {
  const id = spuStore.spuItem.id as number;
  spuSaleAttrList.value = await getSpuSaleAttrListApi(id);
});
onMounted(async () => {
  const { category1Id, category2Id, category3Id } = categoryStore;
  attrList.value = await getAttrListApi({
    category1Id: category1Id as number,
    category2Id: category2Id as number,
    category3Id: category3Id as number,
  });
});

/*************************** 表单校验 ******************************/
// 表单数据和校验规则
const skuFormRef = ref();
// 定义表单数据
const skuFormData = reactive<SkuItem>({
  skuName: "",
  price: 0,
  weight: 0,
  skuDesc: "",
  skuAttrValueList: [
    // {
    // attrId: 0, // 属性名id
    // attrName: "string", // 属性名名称
    // // id: 0, （不要）
    // // skuId: 0,（不要）
    // valueId: 0, // 属性值id
    // valueName: "string", // 属性值名称
    // },
  ],
  skuSaleAttrValueList: [
    // {
    //   saleAttrId: 0, // 销售属性名id
    //   saleAttrName: "string", // 销售属性名名称
    //   saleAttrValueId: 0, // 销售属性值id
    //   saleAttrValueName: "string", // 销售属性值名称
    //   // id: 0, （不要）
    //   // skuId: 0, （不要）
    //   // spuId: 0, （不要）
    // },
  ],
  skuImageList: [
    // {
    //   id: 0,
    //   imgName: "",
    //   imgUrl: "",
    //   isDefault: "", // 指定是否是默认图片
    // },
  ],
  skuDefaultImg: "", // 默认图片地址
});
// 自定义校验规则
const skuImageListValidator = (
  rule: any,
  value: SkuImageList,
  callback: any
) => {
  if (!value.length) {
    callback(new Error("请至少选择一张照片"));
    return;
  }
  if (!value.some((img) => img.isDefault === "1")) {
    callback(new Error("请选中默认图片"));
    return;
  }
  // 校验通过
  callback();
};
// 定义校验规则
const skuFormRules = reactive({
  skuName: [{ required: true, message: "请输入SKU名称", trigger: "blur" }],
  price: [{ required: true, message: "请输入SKU价格", trigger: "blur" }],
  weight: [{ required: true, message: "请输入SKU重量", trigger: "blur" }],
  skuDesc: [{ required: true, message: "请输入SKU规格描述", trigger: "blur" }],
  skuAttrValueList: [{ required: true, message: "请至少选择一个SKU平台属性" }],
  skuSaleAttrValueList: [
    { required: true, message: "请至少选择一个SKU销售属性" },
  ],
  // skuImageList: [
  //   { required: true, type: "array", message: "请至少选择一个SKU图片" },
  // ],
  skuImageList: [{ required: true, validator: skuImageListValidator }],
});
// 复选框变化触发的回调
const selectionChange = (val: SkuImageList) => {
  skuFormData.skuImageList = val;
};

// 设置默认图片
const setSkuDefaultImg = (row: SkuImageItem) => {
  spuImageList.value.forEach((img) => {
    img.isDefault = "0";
  });
  row.isDefault = "1";
  skuFormData.skuDefaultImg = row.imgUrl;
};

/*************************** 点击添加 ******************************/

// 点击添加的逻辑
const addSku = async () => {
  await skuFormRef.value.validate();
  await addSkuApi({
    ...skuFormData,
    skuAttrValueList: skuFormData.skuAttrValueList
      // 过滤掉数组中为undefined的数据
      .filter(Boolean)
      .map((attr) => {
        const [attrId, attrName, valueId, valueName] = (attr as string).split(
          ":"
        );
        return { attrId: +attrId, attrName, valueId: +valueId, valueName };
      }),
    skuSaleAttrValueList: skuFormData.skuSaleAttrValueList
      .filter(Boolean)
      .map((saleAttr) => {
        const [saleAttrId, saleAttrName, saleAttrValueId, saleAttrValueName] = (
          saleAttr as string
        ).split(":");
        return {
          saleAttrId: +saleAttrId,
          saleAttrName,
          saleAttrValueId: +saleAttrValueId,
          saleAttrValueName,
        };
      }),
    spuId: spuStore.spuItem.id,
    category3Id: categoryStore.category3Id,
  });
  // 添加成功响应用户
  ElMessage.success("添加SKU成功");
  cancel();
};

/*************************** 点击取消 ******************************/
const emit = defineEmits(["setIsShow"]);
const cancel = () => {
  emit("setIsShow", 1);
};
</script>

<style scoped>
.sku-inp-number {
  width: 100%;
}
:deep(.el-input__inner) {
  text-align: left;
}
.attr-row {
  width: 100%;
}
.attr-wrap {
  display: flex;
  margin-bottom: 10px;
}
.attr-name {
  text-align: right;
  flex: 1;
  margin-right: 10px;
  font-weight: 700;
}
.sku-img {
  width: 150px;
  height: 150px;
}
</style>
